<template>
	<div class="Balance">
	  <!-- 财务报表 -->
    <el-card shadow="never" class="Balance__chart">
      <div slot="header" class="Balance__chart__top">
        <div style="float:right;">
          <span>本月返利</span>
          <span class="Balance__chart__top__data">￥6999.99</span>
          <span class="Balance__chart__top__data">10↑</span>
        </div>
        <span>本月营收</span>
        <span class="Balance__chart__top__data">￥6999.99</span>
        <span class="Balance__chart__top__data">10↑</span>
      </div>
      <div class="Balance__chart__header">
        <el-radio-group class="Balance__chart__header__right">
          <el-radio border :label="3">周报表</el-radio>
          <el-radio border :label="6">月度报表</el-radio>
          <el-radio border :label="9">季度报表</el-radio>
          <el-radio border :label="0">年度报表</el-radio>
        </el-radio-group>
        <div class="Balance__chart__header__left">
          <el-date-picker style="width:128px;margin-right: 32px;" type="date" placeholder="起始日期"></el-date-picker>
          <el-date-picker style="width:128px;" type="date" placeholder="结束日期"></el-date-picker>
        </div>
      </div>
      <div style="width: 960px;height:284px;" ref="financialChart"></div>
    </el-card>

    <!-- 店铺销售数据 -->
    <el-card shadow="never" style="margin-top:45px;" class="Balance__chart">
      <div slot="header" class="Balance__chart__top padding">
        <span>一级类目分布</span>
      </div>
      <div class="Balance__chart__header">
        <el-select v-model="chartType" style="width:128px;" class="Balance__chart__header__right" placeholder="销售额">
          <el-option label="销售额" value="1"></el-option>
          <el-option label="销售量" value="2"></el-option>
          <el-option label="销售利润" value="3"></el-option>
        </el-select>
        <div class="Balance__chart__header__left">
          <el-date-picker style="width:128px;margin-right: 32px;" type="date" placeholder="起始日期"></el-date-picker>
          <el-date-picker style="width:128px;" type="date" placeholder="结束日期"></el-date-picker>
        </div>
      </div>
      <div style="width: 960px;height:384px;" ref="storeChart"></div>
    </el-card>
	</div>
</template>
<script>
import echarts from 'echarts'
  export default{
    mounted() {
      this.chreatEchartFinancial()
      //this.chreatEchartCustomer()
      this.chreatStoreChart()
    },
    data() {
      return {
        chartType: '1'
      }
    },
    methods: {
      chreatEchartFinancial() {
        const el = this.$refs.financialChart
        const myChart = echarts.init(el)
                // 指定图表的配置项和数据
        var option = {
          xAxis: {
              type: 'category',
              data: ['2011', '2012', '2013', '2014', '2015', '2016']
          },
          yAxis: {
              type: 'value'
          },
          series: [{
              data: [720, 832, 901, 1034, 1190, 1230],
              type: 'line'
          }],
          color: ['#1eddc8']
      };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
      chreatStoreChart () {
        const el = this.$refs.storeChart
        const myChart = echarts.init(el)
        // 指定图表的配置项和数据
        var option = {
          title : {
            text: '店铺销售数据分析',
            subtext: '本月销售数据',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          },
          series : [
            {
              name: '访问来源',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
              ],
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ],
          // color: ['#1eddc8']
      };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    },
  }
</script>
<style lang="scss" >
.Balance{
  padding:20px  30px;
  background-color: #f5f9fe;
  &__chart {
    & /deep/ {
      .el-card__header {
        border-color: #bdbdbd;
        font-size: 18px;
      }
    }
    &__top {
      &__data {
        color: #409EFF;
        margin-left: 18px;
      }
    }
    &__header {
      line-height: 25px;
      padding-bottom: 15px;
      &__right {
        float: right;
      }
      & /deep/ {
        .el-button--primary {
          border-radius: 9px;
          width: 70px;
          padding: 5px 20px;
        }
        .el-input__icon {
          height: 25px;
          line-height: 25px;
        }
        .el-input__inner{
          height: 25px;
          line-height: 25px;
          background-color: #f0f5fb;
	        border-radius: 9px;
          border: none;
        }
        .el-radio-group {
          .is-bordered {
            padding: 0 6px;
            height: 25px;
            line-height: 25px;
            border: none;
            .el-radio__label {
              font-size: 16px;
              color: #409EFF;
            }
          }
        }
      }
    }
  }
  .count-month{
    background-color: #ffffff;
    height: 120px;
    border-bottom: 1px  #bdbdbd solid;
    padding:10px 30px;
    ul li{
        list-style: none;
        line-height: 35px;
        height: 35px;
        span{
            float:right;
            em{
                padding: 0  10px;
                color:#409EFF;
            }
        }
    }
    & /deep/ {
      .el-button--text {
        font-size: 16px;
        padding: 7px 12px;
        vertical-align: middle;
      }
    }
  }

  .newCustomer{
    margin-top:50px;
  }
}

</style>
